<template>
  <div class="header">
    <div class="fold">
      <i class="el-icon-s-unfold" v-if="isShowAside" @click="ShowAside"></i>
      <i class="el-icon-s-fold" v-else @click="ShowAside"></i>
    </div>
    <div class="headImg">123</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
  mounted() {
    console.log(this.isShowAside);
  },
  methods: {
    ShowAside() {
      this.$store.commit("showAside");
    },
  },
  computed: {
    isShowAside() {
      return this.$store.state.isShowAside;
    },
  },
};
</script>

<style scoped lang="less">
.header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  i {
    cursor: pointer;
  }
}
</style>
